{% extends '@Backend/layout.html.twig' %}

{% block web_title %}{% if app.request.get('id') == null %}新增{% else %}编辑{% endif %}文章{% endblock %}

{% block style %}
    <style>
        #editor{
            width: 800px;
        }
    </style>
{% endblock %}

{% block body %}
    {% set a_id = app.request.get('id') %}
     <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <!-- Horizontal Form -->
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">{% if app.request.get('id') == null %}新增{% else %}编辑{% endif %}文章</h3>
                    </div>
                    <!-- /.box-header -->
                    <!-- form start -->
                    <div class="row">
                        <div class="col-md-7">
                            <form class="form-horizontal article-data">
                                <div class="box-body">
                                    <div class="form-group">
                                        <label for="name" class="col-sm-3 control-label"><span class="text-red">*</span> 文章名称：</label>

                                        <div class="col-sm-8">
                                            <input type="text" name="title" class="form-control" id="name" placeholder="请输入文章名称" value="{{ info.title | default('') }}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span class="text-red">*</span> 文章分类：</label>
                                        <div class="col-sm-8">
                                            <select name="classify_id" class="form-control">
                                                {% for list in classify_name | default('') %}
                                                <option value="{{ list.id }}" {% if list.id == info.article_classify_id | default('') %}selected{% endif %}>{{ list.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="datepickers" class="col-sm-3 control-label"><span class="text-red">*</span> 缩略图：</label>

                                        <div class="col-sm-8">
                                            <div class="thumb-img-box">
                                                {% if a_id != null %}
                                               <img src="{{ asset(info.thumb | default('')) }}" width="300" style="margin-bottom: 15px;" />
                                                <span class="thumb-remove">x</span>
                                                {% endif %}
                                            </div>
                                            <input id="upload-file" type="file" multiple class="file upload-input">

                                            <label class="btn btn-primary cur" for="upload-file">点击上传</label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="inputContent" class="col-sm-3 control-label"><span class="text-red">*</span> 文章描述：</label>

                                        <div class="col-sm-8">
                                            <textarea rows="6" class="form-control" name="describe" id="inputContent" placeholder="请输入文章描述">{{ info.introduction | default('') }}</textarea>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">文章内容：</label>
                                        <div class="col-sm-9">
                                            <script id="editor" type="text/plain" name="content">{{ info.content | default('') | raw }}</script>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"></label>

                                        <div class="col-sm-8">
                                            <button type="button" class="btn btn-primary pull-left btn-submit">提交</button>
                                        </div>
                                    </div>
                                </div>

                                <input type="hidden" name="thumb" value="{{ info.thumb | default('') }}">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block js %}
    <script type="text/javascript" src="{{ asset("ueditor/ueditor.config.js") }}"></script>
    <script type="text/javascript" src="{{ asset("ueditor/ueditor.all.js") }}"></script>
    <script>
        {% if app.request.get('id') == null %}
        navHighLight('1', '0');
        {% else %}
        navHighLight('1');
        {% endif %}

        $(function() {
            var ue = UE.getEditor('editor');
            ue.ready(function() {
                ue.setHeight(380);
                // ue.setContent('');
            });

            var body = $("body");
            body.on("change", '#upload-file', uploadPic);

            //  点击'x'号
            body.on('click', '.thumb-remove', function() {
                $(this).parent('.thumb-img-box').html('');
                $("input[name='thumb']").val('');
            });

            // 点击提交
            $('.btn-submit').on('click', function() {
                var param = $('.article-data').serializeObject();

                if ($.trim(param.title) == '' || $.trim(param.describe) == '') {
                    layer.msg('请填写完整');
                    return;
                }
                if (param.thumb == '') {
                    layer.msg('请上传图片');
                    return;
                }

                {% if app.request.get('id') != null %}
                param.id = '{{ app.request.get('id') }}';
                {% endif %}

                $.ajax({
                    url: '{{ path('api_article_opera') }}',
                    data: param,
                    type: 'POST',
                    success: function(res) {
                        layer.msg(res.message);
                        if (res.errorCode == 0) {
                            setTimeout(function () {
                                window.location.href = '{{ path('backend_article_list') }}';
                            }, 1500);
                        }
                    }
                })
            })
        });

        /// ajax 上传图片
        function uploadPic() {
            var _file = this;
            var data = new FormData();
            data.append('image', _file.files[0]);

            var asset = '{{ asset('') }}';
            var URL_fileUpload = '{{ path('api_public_upload_image') }}';
            $.ajax({
                url:URL_fileUpload,
                type: 'POST',
                dataType: 'json',
                processData: false,
                contentType: false,
                data: data,
                success: function (data) {
                    if(data.errorCode == 0){
                        previewFile(_file);
                        layer.msg(data.message);
                        $("input[name='thumb']").val(data.data.path);
                    } else {
                        layer.alert(data.message);
                        return false;
                    }
                }
            });
        }
    </script>
{% endblock %}